<template>

  <div  class="mytree" @scroll="rollingLoad" style="height:900px;overflow:scroll">        
       <el-tree :data="data"    :props="defaultProps" @node-click="handleNodeClick" @node-expand="handleexpand" ></el-tree>
       <i class="el-icon-arrow-left" @click="enterClickFm"></i>
       <i class="el-icon-arrow-right"></i>
  </div>

</template>

<script>
  export default {
    data() {
      return {
        data: [{
          label: '一级 1',
         
        }, {
          label: '一级 1',
          children: [{
            label: '二级 1-1',
          }]
        },
        

        
        ],
        defaultProps: {
          children: 'children',
          label: 'label',
          isLeaf:'leaf'
        },
        baseData:"",

      };
    },
    methods: {
      enterClickFm(){
        console.log('aaaaaa')
      },
      handleNodeClick(data) {
        console.log(data);
        this.baseData=data
        //console.log(data.hasOwnProperty('children'));
        if(!data.hasOwnProperty('children') || data.children.length==0){
            const newChild = {  label: 'testtest', children: [] };
            if (!data.children) {
               this.$set(data, 'children', []);
            }
            data.children.push(newChild);
        }
      },
      handleexpand(data){
        console.log(data)
        
      },
     rollingLoad(event) {
         //console.log(event)
         console.log(this.baseData)
         clearTimeout(this.scrollTimer)
           this.scrollTimer=setTimeout(()=>{
                if (this.scrollLoad(event)) {  //scrollLoadingFlag为true说明可以进行下一次请求
                    //this.checkedData.page += 1;      //下一次请求时，pn++
                    //this.loadData(this.checkedData.id, this.checkedData, this.checkedData.page)        //请求函数
                    const newChild = {  label: Math.ceil(Math.random()*10)+'as', children: [] };
                    this.baseData.children.push(newChild);
                }
        },500)
        if(this.scrollLoad(event)){
             console.log('我执行了吗 /////////////')
             console.log(this.baseData)
             console.log('我执行了吗 /////////////')
              if(!this.baseData){
                 //this.baseData=this.data
                 const newChild =[{  label: Math.ceil(Math.random()*10)+'as', children: [  {  label: Math.ceil(Math.random()*10)+'as', children: [] },] },
                   {  label: Math.ceil(Math.random()*10)+'as', children: [] },
                   {  label: Math.ceil(Math.random()*10)+'as', children: [] },
                   {  label: Math.ceil(Math.random()*10)+'as', children: [] }
                ] ;
                this.data.push(...newChild);
             }else{
                const newChild =[{  label: Math.ceil(Math.random()*10)+'as', children: [] },
                   {  label: Math.ceil(Math.random()*10)+'as', children: [] },
                   {  label: Math.ceil(Math.random()*10)+'as', children: [] },
                   {  label: Math.ceil(Math.random()*10)+'as', children: [] }
                ] ;
                this.baseData.children.push(...newChild);
             }
                
            //}
        }

      },

     scrollLoad(event) {
            let target = event.target;
            const offsetHeight = target.offsetHeight;
            const scrollTop = target.scrollTop;
            const scrollHeight = target.scrollHeight;
            console.log('qqqqqqqqq')
            console.log(offsetHeight)//900
            console.log(scrollTop)  //53
            console.log(scrollHeight)//944
            console.log('qqqqqqqqq')
            if ((offsetHeight + scrollTop) - scrollHeight >=0) {
                //console.log('yyyyyyyyyyyyyyy')
                return true;
            } else {
                //console.log('nnnnnnnnnnnnnnnn')
                return false;
            }
       },
    }
  };
</script>

<style lang="scss" scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

 .mytree::v-deep {
    .el-tree .el-tree-node {
         padding-top:10px;
         padding-bottom:10px;
         margin-bottom: 20px;
         margin-top: 20px;
        //  background-color: #eee;
        .el-tree-node__content{
          //background-color: #eee;
        }

    }
  
 }


</style>